import {
  Button,
  Form,
  Input,
  Space,
  DatePicker,
  Row,
  Col,
  ColProps,
} from "antd";
import './index.scss'

const layout = {
  labelCol: {span: 6},
  wrapperCol: {span: 18},
};

const formItem = {
  order: 1,
  xs: 24,
  sm: 24,
  md: 12,
  xl: 6,
  xxl: 6,
};

const pickerItem = {
  order: 2,
  xs: 24,
  sm: 24,
  md: 12,
  xl: 8,
  xxl: 6,
};

const btnItem: ColProps = {
  flex: 1,
  xs: {order: 4},
  sm: {order: 4},
  md: {order: 4},
  xl: {order: 4},
  xxl: {order: 4},
};

const {RangePicker} = DatePicker;

const Query = () => {

  const [form] = Form.useForm();

  const onFinish = () => {

  }

  const reset = () => {

  }

  return (
    <div className="queryContnet">
      <Form form={form} labelAlign="left" {...layout} layout="inline">
        <Row
          className="queryRow"
          justify="start"
          gutter={[20, 20]}
          wrap={true}
        >
          <Col {...formItem}>
            <Form.Item name="name" label="雷达名称">
              <Input/>
            </Form.Item>
          </Col>
          <Col {...formItem}>
            <Form.Item name="radar_ids" label="雷达编号">
              <Input/>
            </Form.Item>
          </Col>
          <Col {...pickerItem}>
            <Form.Item name="createTimes" label="创建时间">
              <RangePicker showTime/>
            </Form.Item>
          </Col>
          <Col {...btnItem} className="buttonGroup">
            <Space>
              <Button onClick={reset}>重置</Button>
              <Button type="primary" onClick={onFinish}>
                查询
              </Button>
            </Space>
          </Col>
        </Row>
      </Form>
    </div>
  )
}

export default Query
